<ion-header>
    <ion-navbar core-back-button>
        <ion-title>{{ 'core.login.changepassword' | translate }}</ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="showHelp()" [attr.aria-label]="'core.help' | translate">
                <ion-icon name="help-circle"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content padding class="core-center-view">
    <ion-list>
        <ion-item text-wrap *ngIf="!changingPassword">
            <h2>{{ 'core.login.forcepasswordchangenotice' | translate }}</h2>
            <p padding-vertical>{{ 'core.login.changepasswordinstructions' | translate }}</p>
            <button text-wrap ion-button block (click)="openChangePasswordPage()">{{ 'core.login.changepasswordbutton' | translate }}</button>
        </ion-item>
        <ion-item text-wrap *ngIf="changingPassword">
            <p padding-bottom>{{ 'core.login.changepasswordreconnectinstructions' | translate }}</p>
            <button text-wrap ion-button block (click)="login()">{{ 'core.login.reconnect' | translate }}</button>
        </ion-item>
        <ion-item text-wrap>
            <p padding-bottom>{{ 'core.login.changepasswordlogoutinstructions' | translate }}</p>
            <button text-wrap ion-button block color="light" (click)="logout()">{{ logoutLabel | translate }}</button>
        </ion-item>
    </ion-list>
</ion-content>
